<template>
	<xn-form-container :title="formData.id ? '编辑员工家庭成员信息' : '增加员工家庭成员信息'" :width="700" v-model:open="open"
		:destroy-on-close="true" @close="onClose" formType="modal">
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-form-item label="姓名：" name="familyName">
				<a-input v-model:value="formData.familyName" placeholder="请输入姓名" allow-clear />
			</a-form-item>
			<a-form-item label="性别：" name="familyGender">
				<a-radio-group v-model:value="formData.familyGender" :options="genderOptions"> </a-radio-group>
			</a-form-item>
			<a-form-item label="身份证号：" name="familyId">
				<a-input v-model:value="formData.familyId" @blur="getBirthDay" placeholder="请输入身份证号" allow-clear />
			</a-form-item>
			<a-form-item label="生日：" name="familyBirthday">
				<a-input v-model:value="formData.familyBirthday" disabled style="width: 100%" />
			</a-form-item>
			<a-form-item label="健康情况：" name="familyHealth">
				<a-select v-model:value="formData.familyHealth" placeholder="请选择健康情况" :options="healthOptions" />
			</a-form-item>
			<a-form-item label="单位/学校：" name="familyOrg">
				<a-input v-model:value="formData.familyOrg" placeholder="请输入单位/学校" allow-clear />
			</a-form-item>
			<!-- <a-form-item label="关联申请表：" name="heipId">
				<a-input v-model:value="formData.heipId" placeholder="请输入关联申请表" allow-clear />
			</a-form-item> -->
		</a-form>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
			<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
		</template>
	</xn-form-container>
</template>

<script setup name="bizHelpFamilyForm">
import { cloneDeep } from 'lodash-es'
import { required } from '@/utils/formRules'
import tool from '@/utils/tool'
import dayjs from 'dayjs'
// import bizHelpFamilyApi from '@/api/biz/bizHelpFamilyApi'
// 性别
const genderOptions = tool.dictList('GENDER')
// 抽屉状态
const open = ref(false)
const emit = defineEmits({ successful: null })
const formRef = ref()
// 表单数据
const formData = ref({})
const submitLoading = ref(false)
const healthOptions = ref([])
const getBirthdayFromIdCard = (idCard) => {
	if (idCard && idCard.length === 18) {
		var year = idCard.substring(6, 10);
		var month = idCard.substring(10, 12);
		var day = idCard.substring(12, 14);
		return year + '-' + month + '-' + day;
	}
	return null;
}

const getBirthDay = () => {
	let date = getBirthdayFromIdCard(formData.value.familyId)
	formData.value.familyBirthday = dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}

// 打开抽屉
const onOpen = (record) => {
	open.value = true
	healthOptions.value = tool.dictList('健康情况')
	if (record) {
		let recordData = cloneDeep(record)
		formData.value = Object.assign({}, recordData)
	}
}
// 关闭抽屉
const onClose = () => {
	formRef.value.resetFields()
	formData.value = {}
	open.value = false
}
// 默认要校验的
const formRules = {
	familyName: [required('请输入姓名')],
	familyGender: [required('请输入性别')],
	familyBirthday: [required('请输入生日')],
	familyId: [required('请输入身份证号')],
	familyHealth: [required('请输入健康情况')],
	familyOrg: [required('请输入单位/学校')],
	heipId: [required('请输入关联申请表')],
}
// 验证并提交数据
const onSubmit = () => {
	formRef.value
		.validate()
		.then(() => {
			submitLoading.value = true
			const formDataParam = cloneDeep(formData.value)
			emit('successful', formDataParam)
			onClose()

		}).finally(() => {
			submitLoading.value = false
		})
		.catch(() => { })
}
// 抛出函数
defineExpose({
	onOpen
})
</script>
